<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .box {
      width: 250px;
      margin: 100px auto;
    }

    .box li {
      float: left;
      width: 24px;
      height: 24px;
      background-color: pink;
      margin: 15px;
      background: url(../img/sprite.png) no-repeat;
    }
  </style>
</head>
<body>
<div class="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script>
  var list=document.querySelectorAll('li');
  for(var i=0;i<list.length;i++){
    var index=i*44;
    list[i].style.backgroundPosition='0 -'+index+'px';
  }
</script>
</body>
</html>
